<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>江西省大组工网网络监管平台</title>
<head>
    <link rel="stylesheet" href="./swiper-bundle.min.css"/>
    <style>
        @font-face {
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: bold;
            src: url("./otf/AlibabaPuHuiTi-3-85-Bold.ttf") format("opentype");
        }

        @font-face {
            font-family: DINCond-Medium-Regular;
            src: url("./otf/DINCond-Medium-Regular.otf") format("opentype");
        }

        .numFont {
            font-family: DINCond-Medium-Regular;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            color: '#fff';
            font-size: 14px;
        }

        body {
            display: flex;
            flex-direction: column;
            background: url('./img/city_bg.png') no-repeat;
            color: #fff;
            background-size: cover;
        }

        .title {
            height: 80px;
            line-height: 80px;
            padding-left: 38px;
            font-size: larger;
            font-weight: 600;
            text-align: center;
            padding: 0 10px;
        }

        .content {
            display: flex;
            height: 100%;
            margin: 0 10px 0 10px;
            padding-bottom: 10px;
            flex: 1;
        }

        .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            height: 50%;
        }

        .center {
            flex: 1;
            /* border: 1px solid red; */
            margin: 0 10px;
            display: flex;
            flex-direction: column;
        }

        .right, .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="center" id="container">
        <a href="/big/navigation" class="back" style="width:205px;height: 60px;
      margin: 8px auto;line-height: 60px;cursor: pointer;position:fixed;display: grid;
bottom: 34px;text-align: center; background: url('./img/backindex.png') no-repeat;background-size: cover;background-position: center;">
            返回首页
        </a>
        <div class="back" style="margin: 8px auto;position:fixed;right:160px;text-align: center;">
						<span class="jump provinces" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
						       cursor: pointer;display:inline-block;background: #0060AA;border: 1px solid #0060AA;">
							省直机关
						</span>
            <a href="/big/city" class="jump citys" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
						       cursor: pointer;display:inline-block;background: #0D1119;border: 1px solid #015B87;">
                市直机关
            </a>
        </div>
        <div class="back" style="margin: 8px auto;position:fixed;right:160px;
									bottom:140px;text-align: center;">
            <div class="orgNum numFont"
                 style="font-weight: 900;color: #EDF3FF;font-size: 80px;text-shadow: 3px 0px 7px #000000;
                         font-family: DINCond-Medium-Regular;background: url('./img/accessNum.png') no-repeat;background-size: contain;background-position: bottom;">
                0
            </div>
            <div style="font-size: 18px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color:#EDF3FF;">
                已接入省直机关数
            </div>
        </div>
    </div>
</div>
</body>
<script src="./jquery-3.7.0.min.js"></script>
<script src="./g6.min.js"></script>
<script type="application/javascript">

    const data = {"nodes":[{"comboId":"A6","id":"0"},{"comboId":"A0","id":"1"},{"comboId":"A6","id":"2"},{"comboId":"A6","id":"3"},{"comboId":"A2","id":"4"},{"comboId":"A7","id":"5"},{"comboId":"A4","id":"6"},{"comboId":"A2","id":"7"},{"comboId":"A6","id":"8"},{"comboId":"A5","id":"9"},{"comboId":"A6","id":"10"},{"comboId":"A4","id":"11"},{"comboId":"A5","id":"12"},{"comboId":"A6","id":"13"},{"comboId":"A4","id":"14"},{"comboId":"A4","id":"15"},{"comboId":"A5","id":"16"},{"comboId":"A7","id":"17"},{"comboId":"A6","id":"18"},{"comboId":"A7","id":"19"},{"comboId":"A0","id":"20"},{"comboId":"A0","id":"21"},{"comboId":"A1","id":"22"},{"comboId":"A4","id":"23"},{"comboId":"A0","id":"24"},{"comboId":"A2","id":"25"},{"comboId":"A0","id":"26"},{"comboId":"A2","id":"27"},{"comboId":"A4","id":"28"},{"comboId":"A1","id":"29"},{"comboId":"A6","id":"30"},{"comboId":"A1","id":"31"},{"comboId":"A7","id":"32"},{"comboId":"A6","id":"33"},{"comboId":"A4","id":"34"},{"comboId":"A6","id":"35"},{"comboId":"A3","id":"36"},{"comboId":"A7","id":"37"},{"comboId":"A6","id":"38"},{"comboId":"A4","id":"39"},{"comboId":"A7","id":"40"},{"comboId":"A1","id":"41"},{"comboId":"A4","id":"42"},{"comboId":"A4","id":"43"},{"comboId":"A4","id":"44"},{"comboId":"A0","id":"45"},{"comboId":"A5","id":"46"},{"comboId":"A5","id":"47"},{"comboId":"A0","id":"48"},{"comboId":"A0","id":"49"},{"comboId":"A5","id":"50"},{"comboId":"A7","id":"51"},{"comboId":"A6","id":"52"},{"comboId":"A7","id":"53"},{"comboId":"A1","id":"54"},{"comboId":"A2","id":"55"},{"comboId":"A3","id":"56"},{"comboId":"A7","id":"57"},{"comboId":"A4","id":"58"},{"comboId":"A1","id":"59"},{"comboId":"A7","id":"60"},{"comboId":"A7","id":"61"},{"comboId":"A4","id":"62"},{"comboId":"A3","id":"63"},{"comboId":"A1","id":"64"},{"comboId":"A4","id":"65"},{"comboId":"A4","id":"66"},{"comboId":"A5","id":"67"},{"comboId":"A4","id":"68"},{"comboId":"A3","id":"69"},{"comboId":"A1","id":"70"},{"comboId":"A1","id":"71"},{"comboId":"A4","id":"72"},{"comboId":"A6","id":"73"},{"comboId":"A6","id":"74"},{"comboId":"A4","id":"75"},{"comboId":"A7","id":"76"},{"comboId":"A5","id":"77"},{"comboId":"A0","id":"78"},{"comboId":"A7","id":"79"},{"comboId":"A7","id":"80"},{"comboId":"A0","id":"81"},{"comboId":"A4","id":"82"},{"comboId":"A5","id":"83"},{"comboId":"A1","id":"84"},{"comboId":"A1","id":"85"},{"comboId":"A1","id":"86"},{"comboId":"A7","id":"87"},{"comboId":"A3","id":"88"},{"comboId":"A3","id":"89"},{"comboId":"A0","id":"90"},{"comboId":"A0","id":"91"},{"comboId":"A2","id":"92"},{"comboId":"A5","id":"93"},{"comboId":"A2","id":"94"},{"comboId":"A4","id":"95"},{"comboId":"A4","id":"96"},{"comboId":"A0","id":"97"},{"comboId":"A2","id":"98"},{"comboId":"A1","id":"99"}],"combos":[{"id":"A0","label":"Combo A0"},{"id":"A1","label":"Combo A1"},{"id":"A2","label":"Combo A2"},{"id":"A3","label":"Combo A3"},{"id":"A4","label":"Combo A4"},{"id":"A5","label":"Combo A5"},{"id":"A6","label":"Combo A6"},{"id":"A7","label":"Combo A7"}]}


    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        fitView: true,
        fitViewPadding: 50,
        minZoom: 0.00000001,
        layout: {
            type: 'comboCombined',
            nodeSpacing: (d) => 8,
        },
        defaultNode: {
            size: 15,
            color: '#5B8FF9',
            style: {
                lineWidth: 2,
                fill: '#C6E5FF',
            },
        },
        defaultEdge: {
            size: 2,
            color: '#e2e2e2',
        },
        modes: {
            default: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
        },
    });

    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

</script>
</html>
